<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp"%>
<security:csrfMetaTags/>
<link rel="stylesheet" href="ztree/zTreeStyle.css"/>
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="crowd/my-menu.js"></script>
<script type="text/javascript">

    $(function () {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");

        // 调用专门封装好的函数初始化树形结构
        generateTree();

        // 给添加子节点按钮绑定单击响应函数
        $("#treeDemo").on("click",".addBtn",function () {

            // 将当前节点的id，作为新节点的pid保存到全局变量
            window.pid = this.id;

            //打开模态框
            $("#menuAddModal").modal("show");

            return false;
        });

        //给模态框上的保存绑定单击响应函数
        $("#menuSaveBtn").click(function () {

            // 收集表单项中用户输入的数据
            var name = $("#menuAddModal [name=name]").val();
            var url = $("#menuAddModal [name=url]").val();

            // 单选按钮要定位到“被选中”的那一个
            var icon = $("#menuAddModal [name=icon]:checked").val();

            $.ajax({
                "url":"menu/save.json",
                "dataType":"json",
                "type":"post",
                "data":{
                    //按照Menu对象传送参数
                    "pid":window.pid,
                    "url":url,
                    "name":name,
                    "icon":icon
                },
                beforeSend: function(request) {
                    request.setRequestHeader(header, token);
                },
                "success":function (response) {
                    var result = response.result;

                    if(result == "SUCCESS") {
                        layer.msg("操作成功！");

                        // 重新加载树形结构，注意：要在确认服务器端完成保存操作后再刷新
                        // 否则有可能刷新不到最新的数据，因为这里是异步的
                        //重新加载 再次向handler发送AJAX请求 重新从数据库获取数据并形成树
                        generateTree();
                    }

                    if(result == "FAILED") {
                        layer.msg("操作失败！"+response.message);
                    }
                },
                "error":function (response) {
                    layer.msg(response.status+" "+response.statusText);
                }
            });

            // 关闭模态框
            $("#menuAddModal").modal("hide");

            // 清空表单
            // jQuery对象调用click()函数，里面不传任何参数，相当于用户点击了一下
            //重置按钮
            $("#menuResetBtn").click();
    });

    // 给编辑子节点按钮绑定单击响应函数
    $("#treeDemo").on("click",".editBtn",function () {


        //拿到当前节点的id用zTree提供的函数 来获取节点数据 用于回显
        window.id=this.id;

        //打开模态框
        $("#menuEditModal").modal("show");

        //先回显 再修改 再发送AJAX请求
        // 获取zTreeObj对象
        var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

        // 根据id属性查询节点对象
        // 用来搜索节点的属性名
        var key="id";

        // 用来搜索节点的属性值
        var value=window.id;

        var currentNode= zTreeObj.getNodeByParam(key,value);

        //回显表单
        $("#menuEditModal [name=name]").val(currentNode.name);
        $("#menuEditModal [name=url]").val(currentNode.url);


        // 回显radio可以这样理解：被选中的radio的value属性可以组成一个数组，
        // 然后再用这个数组设置回radio，就能够把对应的值选中
        $("#menuEditModal [name=icon]").val([currentNode.icon]);


        return false;
    });

        //给编辑模态框的更新按钮绑定单击响应函数
        $("#menuEditBtn").click(function () {
            // 收集表单项中用户输入的数据
            var name = $("#menuEditModal [name=name]").val();
            var url = $("#menuEditModal [name=url]").val();

            // 单选按钮要定位到“被选中”的那一个
            var icon = $("#menuEditModal [name=icon]:checked").val();

            $.ajax({
                "url":"menu/update.json",
                "dataType":"json",
                "type":"post",
                "data":{
                    //按照Menu对象传送参数 更新不改变父节点
                    //需要传递id
                    "id":window.id,
                    "url":url,
                    "name":name,
                    "icon":icon
                },
                beforeSend: function(request) {
                    request.setRequestHeader(header, token);
                },
                "success":function (response) {
                    var result = response.result;

                    if(result == "SUCCESS") {
                        layer.msg("操作成功！");

                        // 重新加载树形结构，注意：要在确认服务器端完成保存操作后再刷新
                        // 否则有可能刷新不到最新的数据，因为这里是异步的
                        //重新加载 再次向handler发送AJAX请求 重新从数据库获取数据并形成树
                        generateTree();
                    }

                    if(result == "FAILED") {
                        layer.msg("操作失败！"+response.message);
                    }
                },
                "error":function (response) {
                    layer.msg(response.status+" "+response.statusText);
                }
            });

            // 关闭模态框
            $("#menuEditModal").modal("hide");
        });

        // 给“×”按钮绑定单击响应函数
    $("#treeDemo").on("click",".removeBtn",function(){
        //拿到当前节点的id用zTree提供的函数 来获取节点数据 用于回显
        window.id=this.id;

        //打开模态框
        $("#menuConfirmModal").modal("show");

        //先回显 再修改 再发送AJAX请求
        // 获取zTreeObj对象
        var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

        // 根据id属性查询节点对象
        // 用来搜索节点的属性名
        var key="id";

        // 用来搜索节点的属性值
        var value=window.id;

        var currentNode= zTreeObj.getNodeByParam(key,value);

        //回显节点
        $("#removeNodeSpan").html("【<i class='"+currentNode.icon+"'></i>"+currentNode.name+"】");

        return false;

    });

    //给删除按钮模态框上的确认按钮绑定单击事件
        $("#confirmBtn").click(function () {
            $.ajax({
                "url":"menu/remove.json",
                "type":"post",
                "data": {
                    "id": window.id
                },
                "dataType":"json",
                beforeSend: function(request) {
                    request.setRequestHeader(header, token);
                },
                "success":function(response){
                    var result = response.result;

                    if(result == "SUCCESS") {
                        layer.msg("操作成功！");

                        // 重新加载树形结构，注意：要在确认服务器端完成保存操作后再刷新
                        // 否则有可能刷新不到最新的数据，因为这里是异步的
                        generateTree();
                    }

                    if(result == "FAILED") {
                        layer.msg("操作失败！"+response.message);
                    }
                },
                "error":function(response){
                    layer.msg(response.status+" "+response.statusText);
                }
            });

            // 关闭模态框
            $("#menuConfirmModal").modal("hide");
        });



    });

    </script>
    <body>

    <%@ include file="/WEB-INF/include-nav.jsp"%>
    <div class="container-fluid">
        <div class="row">
        <%@ include file="/WEB-INF/include-sidebar.jsp"%>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

        <div class="panel panel-default">
        <div class="panel-heading">
        <i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
        <div style="float: right; cursor: pointer;" data-toggle="modal"
    data-target="#myModal">
        <i class="glyphicon glyphicon-question-sign"></i>
        </div>
        </div>
        <div class="panel-body">
        <!-- 这个ul标签是zTree动态生成的节点所依附的静态节点 -->
        <ul id="treeDemo" class="ztree"></ul>
        </div>
        </div>
        </div>
        </div>
</div>

<%@include file="/WEB-INF/model-menu-add.jsp" %>
<%@include file="/WEB-INF/model-menu-confirm.jsp" %>
<%@include file="/WEB-INF/model-menu-edit.jsp" %>
</body>
</html>